<template>
  <!-- 查看文章详情的对话框 -->
  <el-dialog title="预览文章" :visible="showDialog" width="42%" @close="onClose" @open="onOpen">
    <h2 class="title">{{ preData.title }}</h2>

    <div class="info">
      <span>{{ preData.createTime | dateFormat }}</span>
      <span>超级管理员</span>
      <span class="el-icon-view"> {{ preData.visits }}</span>
    </div>

    <!-- 文章的详情 -->
    <div v-html="preData.articleBody" class="detail-box"></div>
  </el-dialog>
</template>

<script>
// 导入接口
import { details } from '@/api/hmmm/articles.js'

export default {
  name: 'PreView',
  data() {
    return {
      // 文章的数据
      preData: {
        // 标题
        title: '',
        // 时间
        createTime: '',
        // 阅读数
        visits: '',
        // 内容区域
        articleBody: '',
        // 视频地址
        videoURL: ''
      }
    }
  },
  props: {
    // 控制对话框的显示和隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      required: true
    }
  },
  methods: {
    // 对话框打开时候的处理函数
    async onOpen() {
      const result = await details(this.id)
      console.log(result)
      this.preData = result.data
    },
    // 点击了X按钮
    onClose() {
      this.$emit('update:showDialog', false)
    }
    // onClosed() {
    //   // 主要清理数据
    //   this.$emit('update:id', '')
    //   this.$refs.formRef.resetFields()
    // }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin: 0 0 10px 0;
}

.info {
  font-size: 12px;
  padding-bottom: 10px;
  span {
    margin: 0 0 0 10px;
  }
}

// 修改 dialog 内部元素的样式，需要添加样式穿透
.detail-box {
  width: 760px;
  height: 600px;
  background-color: #f5f5f5;
  padding: 10px;
  border-top: 1px solid #c2bdbd;
  border-top-style: dashed;
}
</style>
